<template>
  <view class="wk-foot">
    <view
      class="wk-foot__placeholder"
      :style="{
        height: placeholderHeight + 'px',
      }"
    ></view>
    <view
      class="wk-foot__content"
      :style="{
        'background-color': bgColor,
        'padding-bottom': safeBottom + 'px',
      }"
      id="wkFoot"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
// 主要用于定位在底部的内容需要有独立的撑开，这里自动计算撑开的内容高度，暂时用
export default {
  props: {
    // 底部色块背景颜色
    bgColor: {
      type: String,
      default: "#ffffff",
    },
    // customStyle: {
    //   type: Object,
    //   default: () => ({
    //     "background-color": "#ffffff",
    //   }),
    // },
  },

  data() {
    return {
      placeholderHeight: 0,
      safeBottom: 0,
    };
  },

  async mounted() {
    const system = uni.getSystemInfoSync();
    this.safeBottom = system.safeAreaInsets ? (system.safeAreaInsets.bottom || 0) : 0;

    this.$nextTick(async () => {
      const h = await this.getRectHeight();
      this.placeholderHeight = h + this.safeBottom;
      this.$emit("get-height", this.placeholderHeight);
    });
  },

  methods: {
    // 获取底部的高度，主要为了同步占位高度
    async getRectHeight() {
      const rect = await this.$u.getRect("#wkFoot");
      return rect.height;
    },
  },
};
</script>
<style lang="scss" scoped>
.wk-foot {
  z-index: 999;
  
  &__placeholder {
    width: 100%;
    height: auto;
  }

  &__content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;

    // padding-bottom: env(safe-area-inset-bottom);
    // padding-bottom: constant(safe-area-inset-bottom);
  }
}
</style>
